<template>
    <div class="tzc_sy">
        <div class="tzc_sy_bt">
            <div>
                <img :src="LinkUrlImg+Fy_DATA.logo" alt="" srcset="">
            </div>
            <div>
                <ul>
                    <li >
                        <span @click="clickDemo_home" :class="i==-1?'tzc_span_hover':''">全部</span>
                    </li>
                    <li v-for="(item,index) in Dh_DATA" :key="index">
                        <span @click="clickDemo(item,index)" :class="index==i?'tzc_span_hover':''">{{item.title}}</span>
                    </li>
                </ul>
            </div>
            <!-- 用户手册 -->
            <div @click="b">目录说明</div>
        </div>
        <div class="tzc_sy_search">
            <span class="iconfont iconsousuo" v-show="flag"></span>
            <input v-model="sname" @click="kg"/>
            <span @click="search">搜索</span>
        </div>
        <div class="tzc_book_sort">
            <div class="tzc_book_son_1" @click="bt">
                <div>标题</div>
                <div v-show="sx">
                    <span></span>
                    <span></span>
                </div>
                <div v-show="jx">
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="tzc_book_son_2" @click="sj">
                <div>时间</div>
                <div v-show="sx1">
                    <span></span>
                    <span></span>
                </div>
                <div v-show="jx1">
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="tzc_book_sort2" v-if="SearchF">
            没有更多了
        </div>
        <div class="tzc_book_s" @click="Previous_page()">上一页</div>
        <div class="tzc_book_x" @click="Next_page()">下一页</div>
        <div id="box">
            <h2>{{Fy_DATA.catalogue}}</h2>
            <div>
                <ul>
                    <li v-for="(item,index) in Sdata" :key="index" @click="tc(item,index)">{{item.name}}({{item.value}}册)</li>
                </ul>
            </div>
        </div>
        <div class="tzc_sy_books">
            <div class="tzc_sy_bookshelf">
                <!-- 7本书效果 -->   
                <!-- <Booklist2 :mydata="item" :mypp="mypp" /> -->
                <div  class="tzc_sy_bookshelf_b" v-for="(item, i) in SY_data.data" :key="i">
                    <router-link v-if="item.type == 'EPUB'" :to="'/ebook' + item.guid">
                        <img :src="item.pic" alt="" srcset="" />
                        <div>{{ item.title }}</div>
                    </router-link>
                    <router-link v-else-if="item.type == 'PDF'" :to="'/epdf' + item.guid">
                        <img :src="item.pic" alt="" srcset="" />
                        <div>{{ item.title }}</div>
                    </router-link>
                </div>
                <!-- <div style="clear:both"></div> -->
            </div>
        </div>
        <div class="tzc_sy_bt_bottom">{{Fy_DATA.copyright}}</div>
    </div>
</template>
<script>
import Booklist from '@/components/book_list'
import Booklist2 from '@/components/book_list2'
import {articlelist,getccconfig,menulist,book_menu} from '@/api/api';
import { setItem } from 'localforage';
//目录说明弹窗变量
var Popup;
export default {
    name:'tzc_sy',
    components: {
        Booklist,Booklist2
    },
    mounted () {
        this.Postarticlelist();
        this.Post_logo();
        this.Navigation();
        this.Roll();
        this.Statistics();
    },
    data() {
        return {
            SY_data:{},
            Fy_DATA:{},
            Dh_DATA:[],
            Sdata:[],
            page:1,
            i:-1,
            NextDATA:{},
            mypp:{},
            sname:'',
            flag:true,
            sx:true,
            jx:false,
            sx1:true,
            jx1:false,
            name:'',
            scrollTop:0,
            SearchF:false,
            Pkey:''

        }
    },
    methods: {
        clickDemo_home(){
            this.i=-1;
            this.Postarticlelist();
        },
        search(){
            this.flag=false;
            this.Postarticlelist();
        },
        kg(){
            this.flag=false;
        },
        //sx
        bt(){
            if(this.sx){
                this.sx=false;
                this.jx=true;
                this.name="title";
                this.Postarticlelist();
            }else{
                this.sx=true;
                this.jx=false;
                this.name="title";
                this.Postarticlelist();
            }
        },
        //jx
        sj(){
            if(this.sx1){
                this.sx1=false;
                this.jx1=true;
                this.name="time";
                this.Postarticlelist();
            }else{
                this.sx1=true;
                this.jx1=false;
                this.name="time";
                this.Postarticlelist();
            }
        },
        //上一页，下一页方法
        Previous_page(){
            this.page=this.page-1;
            if (this.page==0) {
                this.page=1;
            };
            if (this.Pkey!=='') {
                this.SY_data={};
                this.Postarticlelist(this.Pkey);
            } else {
                this.SY_data={};
                this.Postarticlelist();
            }
        },
        Next_page(){
            this.page=this.page+1;
            if (this.Pkey!=='') {
                this.SY_data={};
                this.Postarticlelist(this.Pkey);
            } else {
                this.SY_data={};
                this.Postarticlelist();
            }
        },
        //数据统计方法
        Statistics(){
            book_menu().then((res) => {
                this.Sdata=res.data.mydata;
            }).catch((err) => {
                console.log(err)
            });
        },
        //方法
        Postarticlelist(mguid){
            let query={
                pagesize:40,
            };
            if(mguid!=null){
                query.mguid = mguid;
            } 
            query.title = this.sname;
            query.order = this.name;
            query.page = this.page;
            articlelist(query).then((res) => {
                this.SY_data=res.data.mydata;
                this.mypp = query;
                if (this.SY_data.m_all==0) {
                    this.SearchF=true;
                } else {
                    this.SearchF=false;
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        //logo 版权信息
        Post_logo(){
            let query={
                info:'book'
            };
            getccconfig(query).then((res) => {
                let d=res.data.mydata;
                this.Fy_DATA=eval('(' + d + ')');
            }).catch((err) => {
                console.log(err)
            });
        },
        //导航栏分类
        Navigation(){
            menulist().then((res) => {
                this.Dh_DATA=res.data.mydata.data
            }).catch((err) => {
                
            });
        },
        //弹窗点击导航数据同步
        tc(item,index){
            this.i=index;
            console.log("点击测试",item);
            $("#box").css("display","none");
            //关闭当前layer弹窗
            parent.layer.close(Popup);
            this.Postarticlelist(item.guid);
        },
        //导航栏方法
        clickDemo(item,index){
            this.i=index;
            this.NextDATA=item;
            this.Pkey=item.key;
            this.Postarticlelist(item.key);
            
        },
        //滚动条滚动方法
        Roll(){
            let rq=document.getElementsByClassName("tzc_sy")[0]
            let flag=true;
            let currentpos=rq.scrollTop;  
            setTimeout(function(){ 
                //鼠标悬停，滚动停止       
                rq.onmouseover=function(){
                    flag=false;
                }
                //鼠标离开，继续滚动 
                rq.onmouseout=function(){
                    flag=true; 
                } 
                var old=-1;     
                var interval=setInterval(function(){  
                    if(flag){  
                        currentpos=rq.scrollTop;    
                        if (currentpos==old){  
                            rq.scrollTop=0;  
                        } else {    
                            old=currentpos;    
                            rq.scrollTop=currentpos+1.5;    
                        }    
                    }  
                },25);  
                //以25ms的速度每次滚动3.5PX  
            },450)  
        },
        b(){
            Popup=layer.open({
                title: "用户手册",
                shade: false,
                zIndex:999,
                type: 1,//类型，必填，否则弹窗会出现[object:object]的字，还有一些问题
                content: $("#box"),//这里使用jquery引用上面的组件
                area: ["700px", "500px"],
                end:function(){
                    $("#box").css("display","none")
                }
            });
        },
    }
}
</script>
<style lang="scss" scoped>
    .tzc_sy{
        width: 100%;
        height: 100%;
        // background: red;
        background-image: url(./assets/image/tzc_bj.png);
        background-size: 100% 100%;
        overflow-y: auto;
        position: fixed;
    }
    /deep/ .layui-layer {
        -webkit-overflow-scrolling: touch;
        top: 150px;
        left: 0;
        margin: 0;
        padding: 0;
        background-color: #f7f7f7c7;
        -webkit-background-clip: content;
        border-radius: 2px;
    }
    ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
        background-color:#f8f8f8;
    }
    ::-webkit-scrollbar {//滚动条的宽度
        width:5px;
        height:5px;
    }
    ::-webkit-scrollbar-thumb {//滚动条的设置
        background-color:#d6967f;
        background-clip:padding-box;
        min-height:28px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color:#bbb;
    }
    .tzc_book_s{
        width: 3rem;
        height: 1rem;
        background: #f2b99ba6;
        color: white;
        border-radius: 5px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        line-height: 1rem;
        position: fixed;
        top: 50%;
        left: 1.5%;
        transform: translateY(-50%);
        z-index: 9999;
        cursor: pointer;
    }
    .tzc_book_x{
        width: 3rem;
        height: 1rem;
        background: #f2b99ba6;
        color: white;
        border-radius: 5px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        line-height: 1rem;
        position: fixed;
        top: 50%;
        right: 1.5%;
        transform: translateY(-50%);
        z-index: 9999;
        cursor: pointer;
    }
    .tzc_sy_bt{
        width: 100%;
        height: 2rem;
        font-size: 25px;
        font-weight: 700;
        color: #743D0D;
        background: url(./assets/image/header.png) no-repeat;
        background-size: 100% auto;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 450 !important;
        div:nth-of-type(1){
            width: 12%;
            height: 100%;
            float: left;
            position: relative;
            img{
                width: 75%;
                height: auto;
                position: absolute;
                left: 30%;
                top: 40%;
                transform: translateY(-50%);
            }
        }
        div:nth-of-type(2){
            width: 80%;
            height: 100%;
            float: left;
            margin-left: 2%;
            ul{
                width: 100%;
                // white-space:nowrap;
                // overflow-y: hidden;
                // overflow-x: scroll;
                li{
                    list-style-type:none;
                    width: 2.5rem;
                    height: 0.8rem;
                    // float: left;
                    display: inline-block;
                    margin-top: 0.4rem;
                    // padding-left: 0.1rem;
                    // padding-right: 0.1rem;
                    border-right: 2px solid #743d0d5e;
                    text-align: center;
                    span{
                        all: initial;
                        display: block;
                        width: 2.2rem;
                        height: 0.8rem;
                        line-height: 0.8rem;
                        font-size: 20px;
                        text-align: center;
                        margin-left: 0.15rem;
                        float: left;
                        color: #743D0D;
                        cursor: pointer;
                    }
                    span:hover{
                        background: rgba(0, 0, 0, 0.411);
                        border-radius: 12px;
                        color: white;
                    }
                }
                .tzc_span_hover{
                    background: rgba(0, 0, 0, 0.411);
                    border-radius: 12px;
                    color: white;
                }
            }
        }
        
        div:nth-of-type(3){
            width: 6%;
            height: 0.8rem;
            line-height: 0.8rem;
            margin-top: 0.4rem;
            // margin-right: 0.5%;
            text-align: center;
            float: right;
            // background: aqua;
            font-size: 20px;
            cursor: pointer;
            color: #8b5e58;
            background: rgba(255, 255, 255, 0.582);
            border-radius: 18px;
        }
       
    }
    .tzc_sy_search{
        width: 30%;
        height: 0.9rem;
        position: fixed;
        left: 50%;
        top: 2.2rem;
        z-index: 450;
        transform: translateX(-50%);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.582);
        // background: red;
        // position: relative;
        input{
            width: 100%;
            height: 0.9rem;
            border: none;
            border-radius: 18px;
            background:none;
            position: absolute;
            left: 0;
            top: 0;
            text-indent: 25px;
            outline: none;
        }
        span:nth-of-type(1){
            // display: block;
            width: 25%;
            height: auto;
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 450;
            color: white;
        }
        span:nth-of-type(2){
            display: block;
            width: 25%;
            height: auto;
            font-size: 15.5px;
            position: absolute;
            right: -10%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 450;
            color: white;
            cursor: pointer;
        }
    }
    .tzc_book_sort{
        width: 250px;
        height: 0.9rem;
        position: fixed;
        right: 3.5%;
        top: 2.2rem;
        z-index: 450;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.582);
        // -moz-box-shadow: 5px 8px 5px #8888888c; /* 老的 Firefox */
        // box-shadow: 5px 8px 5px #8888888c;
        div{
            cursor: pointer;
        }
        .tzc_book_son_1{
            width: 124px;
            height: 0.9rem;
            float: left;
            border-right: 2px solid rgb(226, 226, 226);
            div:nth-of-type(1){
                width: 2.1rem;
                height: 0.9rem;
                float: left;
                text-align: center;
                line-height: 0.9rem;
                font-size: 16px;
                color: #8b5e58;
            }
            div:nth-of-type(2){
                width: 0.35rem;
                height: 0.9rem;
                float: left;
                font-size: 14px;
                color: #450;
                span:nth-of-type(1){
                    margin-top: 0.2rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-bottom: 0.25rem solid rgb(61, 61, 61);
                }
                span:nth-of-type(2){
                    margin-top: 0.05rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-top: 0.25rem solid rgb(179, 177, 177);
                }
            }
            div:nth-of-type(3){
                width: 0.35rem;
                height: 0.9rem;
                float: left;
                font-size: 14px;
                color: #450;
                span:nth-of-type(1){
                    margin-top: 0.2rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-bottom: 0.25rem solid rgb(179, 177, 177);
                }
                span:nth-of-type(2){
                    margin-top: 0.05rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-top: 0.25rem solid rgb(61, 61, 61);
                }
            }
        }
        .tzc_book_son_2{
            width: 124px;
            height: 0.9rem;
            float: left;
            div:nth-of-type(1){
                width: 2.1rem;
                height: 0.9rem;
                float: left;
                text-align: center;
                line-height: 0.9rem;
                font-size: 16px;
                color: #8b5e58;
            }
            div:nth-of-type(2){
                width: 0.35rem;
                height: 0.9rem;
                float: left;
                font-size: 14px;
                color: #450;
                span:nth-of-type(1){
                    margin-top: 0.2rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-bottom: 0.25rem solid rgb(61, 61, 61);
                }
                span:nth-of-type(2){
                    margin-top: 0.05rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-top: 0.25rem solid rgb(179, 177, 177);
                }
            }
            div:nth-of-type(3){
                width: 0.35rem;
                height: 0.9rem;
                float: left;
                font-size: 14px;
                color: #450;
                span:nth-of-type(1){
                    margin-top: 0.2rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-bottom: 0.25rem solid rgb(179, 177, 177);
                }
                span:nth-of-type(2){
                    margin-top: 0.05rem;
                    display: block;
                    float: left;
                    width: 0;
                    height: 0;
                    border-left: 0.1rem solid transparent;
                    border-right: 0.1rem solid transparent;
                    border-top: 0.25rem solid rgb(61, 61, 61);
                }
            }
        }
    }
    .tzc_book_sort2{
        width: 20%;
        height: 0.9rem;
        background: rgba(255, 255, 255, 0.582);
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #8b5e58;
        text-align: center;
        font-size: 26px;
        line-height: 0.9rem;
        border-radius: 18px;
        z-index: 450;
    }
    .tzc_sy_bt_bottom{
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 15px;
        font-weight: 700;
        color: #743D0D;
        text-align: center;
        background: url(./assets/image/bottom.png) no-repeat;
        background-size: 100% auto;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 450 !important;
    }
    .tzc_sy_books{
        width: 100%;
        height: auto;
        padding-top: 2rem;
        .tzc_sy_bookshelf {
            margin: 0 auto;
            margin-top: 2rem;
            width: 94%;
            height: auto;
            z-index: 99;
            .tzc_sy_bookshelf_b {
                z-index: 100;
                width: 10%;
                height: 4rem;
                float: left;
                padding-left: 1.25%;
                padding-right: 1.25%;
                margin-top: 4rem;
                background: url(./assets/image/tzc_mj_2.png) no-repeat;
                background-size: 100% auto;
                // clear: both;
                a {
                text-decoration: none;
                }
                img {
                width: 90%;
                height: auto;
                margin-left: 5%;
                margin-top: -190%;
                }
                div {
                width: 100%;
                text-align: center;
                font-size: 16px;
                color: white;
                margin-top: 12%;
                text-decoration: none;
                }
            }
        }
    }
    #box{
        display: none;
        padding: 0.5rem;
        h2{
            line-height: 0.8rem;
            color: #743D0D;
            font-size: 18px;
            text-indent: 2em;
            // margin-top: 0.5rem;
        }
        div{
            ul{
                li{
                    width: 90%;
                    margin-left: 5%;
                    font-size: 16px;
                    line-height: 1rem;
                    // text-indent: 2em;
                    border-bottom: 1px solid rgb(240, 240, 240);
                }
            }
        }
    }
</style>